<template>
  <a-card :bordered="false">
    <div>
      <!--表头条件搜索  -->
      <a-form-model layout="inline" :model="caseform">
        <a-form-model-item
          ><a-input placeholder="case编号" style="width: 150px" v-model="caseform.caseId"></a-input
        ></a-form-model-item>
        <a-form-model-item>
          <a-select placeholder="请选择项目组" v-model="caseform.projectId" style="width: 150px">
            <a-select-option v-for="(projectTeam, index) in projectTeams" :key="index + 1">{{
              projectTeam.teamName
            }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item>
          <a-select placeholder="请选择case类型" v-model="caseform.caseType" style="width: 150px">
            <a-select-option v-for="(caseType, index) in caseTypeList" :key="index + 1">{{
              caseType.typeName
            }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item>
          <a-select placeholder="请选择case状态" v-model="caseform.caseStatus" style="width: 150px">
            <a-select-option v-for="(caseStatus, index) in caseStatusList" :key="index + 1">{{
              caseStatus.statusName
            }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item
          ><a-month-picker placeholder="请选择投产日期" style="width: 150px" v-model="caseform.caseTime"
        /></a-form-model-item>
        <a-form-model-item>
          <a-select placeholder="请选择责任人" v-model="caseform.principal" style="width: 150px">
            <a-select-option v-for="principal in principalList" :key="principal.username">{{
              principal.realname
            }}</a-select-option></a-select
          >
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 12, offset: 5 }"
          ><a-button type="primary" icon="search" @click="handleSubmit">搜索</a-button></a-form-model-item
        >
        <a-form-model-item :wrapper-col="{ span: 12, offset: 5 }"
          ><a-button type="primary" icon="sync" @click="resetForm">重置</a-button></a-form-model-item
        >
      </a-form-model>
      <br />
      <!-- 主体表格内容 -->
      <!-- <div style="margin-bottom: 16px">
        <a-button type="primary" icon="plus" @click="showModal">新增</a-button>&nbsp;&nbsp;
        <a-button type="primary" :disabled="!hasexportSelected" icon="cloud" @click="exportCase">导出</a-button>&nbsp;&nbsp;
        <a-popconfirm title="确定要删除以下case？" @confirm="delCase">
          <a-icon slot="icon" type="question-circle-o" style="color: red" />
          <a-button type="danger" :disabled="!hasdelSelected" icon="delete">删除</a-button>
        </a-popconfirm>
      </div> -->
      <!-- :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" -->
      <a-table :columns="columns" :data-source="data" :pagination="false" :scroll="{ x: 1500 }">
        <a slot="action" slot-scope="text">
          <!-- 开发按钮 -->
          <a-button type="primary" :disabled="text.caseStatus != '开发中'" icon="solution" @click="devCase(text)"
            >开发</a-button
          >
        </a>
      </a-table>
      <br />
      <!-- 分页组件 -->
      <a-pagination v-model="currentpage" :total="total" :pageSize="pageSize" @change="pageChange" />
      <!-- 交易开发modal -->
      <a-modal v-model="devModal" title="交易列表" width="90%">
        <a-table :columns="devcolumns" :data-source="devdata" :pagination="false">
          <a slot="logs" slot-scope="text, record" @click="downloadlogs">
              {{ logs }}
          </a>
          <a slot="devaction" slot-scope="text">
            <a-button type="primary" @click="devedit(text)">编辑/查看</a-button>&nbsp;&nbsp;
            <a-button type="primary" @click="unitTest(text)">单元测试</a-button>&nbsp;&nbsp;
            <a-button type="primary" @click="downloadcode">代码下载</a-button>&nbsp;&nbsp;
          </a>
        </a-table>
      </a-modal>
      <!-- 编辑查看Modal -->
      <a-modal v-model="deveditModal" width="80%" title="交易开发" :footer='false'>
        <a-card :bordered="false">
          <a-row type="flex" justify="space-around">
            <a-col :span="13">
              <a-collapse :bordered="false" default-active-key="1">
                <a-collapse-panel key="1" header="输入项校验" :disabled="false">
                  <a-table :data-source="checktrandataSource" :columns="checktrancolumns1" :pagination="false">
                  </a-table>
                  <br />
                  <a-button type="primary" @click="getCode">代码生成</a-button>
                </a-collapse-panel>
                <a-collapse-panel key="2" header="查询代码生成" :disabled="false">
                  &nbsp;&nbsp;&nbsp;&nbsp; 请选择查询模板:
                        <a-select default-value="1" style="width: 160px">
                          <a-select-option value="1">HBASE</a-select-option>
                          <a-select-option value="2"> SOLR+HBASE </a-select-option>
                          <a-select-option value="3"> ES+HBASE </a-select-option>
                        </a-select>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <a-checkbox> 是否需要打印 </a-checkbox>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <a-button type="primary" @click="getCodebyquery">代码生成</a-button>
                </a-collapse-panel>
              </a-collapse>
            </a-col>
            <a-col :span="9">
              <a-descriptions layout="vertical" bordered>
                <a-descriptions-item label="自动代码生成">
                  <a-textarea v-model="codeArea" :rows="35" />
                  <br/><br/>
                  <a-button type="primary" @click="saveCode">保存</a-button>
                </a-descriptions-item>
              </a-descriptions>
            </a-col>
          </a-row>
        </a-card>
      </a-modal>
    </div>
    <!-- 单元测试 -->
    <a-modal v-model="unitModal" title="测试案例" width="70%" @ok="saveAndTest">
      <a-table :data-source="checktrandataSource" :columns="checktrancolumns" :pagination="false" :scroll="{ x: 1200 }">
        <a slot="operation" slot-scope="text, record">
          <a-input placeholder="请填写测试值" v-model="record.check" />
        </a>
        <p slot="isOk" slot-scope="text, record" style="color: red">
          {{ text != '输入合法' ? text : '' }}
        </p>

        <p />
      </a-table>
    </a-modal>
  </a-card>
</template>

<script>
import {
  getCaseStatus,
  getTypeList,
  getProTeamList,
  getDevelopCaseList,
  getCaseDetail,
  editCase,
  getPrincipalList,
} from '@/api/case/case'
import { getStore } from '@/utils/storage'
import { getTranCodeList, checkInput, getCode, downloadlogs,downloadcode } from '@/api/trans/tran'
import moment from 'moment'
import 'moment/locale/zh-cn'
export default {
  data() {
    return {
      unitModal: false,
      codeArea: '',
      checktrandataSource: [],
      checktrancolumns1: [
        { title: '英文名称', dataIndex: 'enName' },
        { title: '中文名称', dataIndex: 'cnName' },
        { title: '数据类型', dataIndex: 'dataType' },
        { title: '是否必输', dataIndex: 'inputNeccessary' },
      ],
      logs: '',
      checktrancolumns: [
        { title: '英文名称', dataIndex: 'enName', fixed: 'left' },
        { title: '中文名称', dataIndex: 'cnName', width: 100 },
        { title: '数据类型', dataIndex: 'dataType', width: 150 },
        { title: '是否必输', dataIndex: 'inputNeccessary', width: 100 },
        { title: '输入值', dataIndex: 'checkInput', width: 220, scopedSlots: { customRender: 'operation' } },
        { title: '是否合法', dataIndex: 'isOk', width: 180, scopedSlots: { customRender: 'isOk' } },
        { title: '查询逻辑', dataIndex: 'queryLogic', key: 'queryLogic', width: 440 },
      ],
      defaultTabKey: '0',
      forceRender: true,
      devform: {},
      showcaseModal: false,
      deveditModal: false,
      devdata: [],
      devcolumns: [
        { title: '交易码', dataIndex: 'trans.transCode', key: 'transCode', width: 100 },
        { title: '交易名称', dataIndex: 'trans.transName', key: 'transName', width: 280 },
        { title: 'ESB服务ID', dataIndex: 'trans.esbId', key: 'esbId', width: 200 },
        { title: 'ESB服务名称', dataIndex: 'trans.esbName', key: 'esbName', width: 200 },
        { title: '交易日期', dataIndex: 'trans.createTime', key: 'createTimee', width: 200 },
        { title: '测试日志', key: 'logs', scopedSlots: { customRender: 'logs' } },
        { title: '操作', width: 350, key: 'operation', scopedSlots: { customRender: 'devaction' } },
      ],
      devModal: false,
      fileaddress: '',
      createcaseId: '',
      caseInfoModal: false,
      transInputdata: [],
      transOutputdata: [],
      transcolumns: [
        { title: '英文名称', dataIndex: 'enName', key: 'enName', width: 200 },
        { title: '中文名称', dataIndex: 'cnName', key: 'cnName', width: 200 },
        { title: '数据类型', dataIndex: 'dataType', key: 'dataType', width: 200 },
        { title: '是否必输', dataIndex: 'inputNeccessary', key: 'inputNeccessary', width: 200 },
        { title: '查询逻辑', dataIndex: 'queryLogic', key: 'queryLogic', width: 600 },
      ],
      moment,
      transcodeList: [],
      uploading: false,
      currentpage: 1,
      total: 0,
      pageSize: 8,
      editCaseForm: {
        caseDTO: { caseStatus: 0, projectId: '', caseType: '' },
        finishList: {},
        processList: {},
        currentCaseStatus: { statusId: 0 },
        demand: {},
        transMap: [],
        trans: {},
        sql: {},
      },
      stepStyle: {
        marginBottom: '60px',
        boxShadow: '0px -1px 0 0 #e8e8e8 inset',
      },
      visible: false,
      principalList: [],
      caseStatusList: [],
      caseTypeList: [],
      projectTeams: [],
      data: [],
      columns: [
        { title: 'case编号', dataIndex: 'caseId', key: 'caseId', fixed: 'left', width: 230 },
        { title: '项目组', dataIndex: 'projectId', key: 'projectId', width: 120 },
        { title: 'case类型', dataIndex: 'caseType', key: 'caseType', width: 220 },
        { title: 'case概要', dataIndex: 'caseDesc', key: 'caseDesc', width: 250 },
        { title: '投产日', dataIndex: 'caseTime', key: 'caseTime', width: 150 },
        { title: 'case状态', dataIndex: 'caseStatus', key: 'caseStatus', width: 120 },
        { title: '开发负责人', dataIndex: 'principal', key: 'principal', width: 120 },
        { title: '最后更新时间', dataIndex: 'modifyTime', key: 'modifyTime', width: 150 },
        { title: '申请人', dataIndex: 'createBy', key: 'createBy', width: 120 },
        { title: '提交时间', dataIndex: 'createTime', key: 'createTime', width: 150 },
        {
          title: '操作',
          key: 'operation',
          fixed: 'right',
          width: 130,
          scopedSlots: { customRender: 'action' },
        },
      ],
      selectedRowKeys: [], // Check here to configure the default column
      createform: {
        projectTeam: undefined,
        caseType: undefined,
        caseTime: undefined,
        caseDesc: '',
        caseInfo: '',
      },
      caseform: {
        caseId: '',
        caseTime: '',
      },
      rules: {
        projectId: [{ required: true, message: '请选择一个项目组', trigger: 'blur' }],
        caseType: [{ required: true, message: '请选择一个case类型', trigger: 'change' }],
        caseTime: [{ required: true, message: '请选择投产时间', trigger: 'change' }],
        caseDesc: [{ required: true, message: 'case描述不能为空', trigger: 'change' }],
        caseInfo: [{ required: true, message: 'case概要不能为空', trigger: 'blur' }],
      },
      transrules: {
        transName: [{ required: true, message: '请输入交易名称', trigger: 'blur' }],
        transCode: [{ required: true, message: '交易码不能为空', trigger: 'change' }],
        isGroup: [{ required: true, message: '是否涉及分组聚合查询', trigger: 'change' }],
      },
      selectCase: [],
    }
  },

  created() {
    this.getStatusList()
    this.getTypeList()
    this.getProTeamList()
    this.getCaseList()
    this.getTranCodeList()
    this.getPrincipal()
  },

  computed: {},

  methods: {
    handleSubmit() {
      this.selectedRowKeys = []
      getDevelopCaseList(this.caseform, 1, this.pageSize, getStore('pro__Login_Username').value).then((res) => {
        this.data = res.result.caseDTO
        this.total = res.result.total
      })
    },

    resetForm() {
      this.selectedRowKeys = []
      this.caseform = {
        caseId: '',
        caseTime: '',
      }
      getDevelopCaseList(this.caseform, 1, this.pageSize, getStore('pro__Login_Username').value).then((res) => {
        this.data = res.result.caseDTO
        this.total = res.result.total
      })
    },

    getStatusList() {
      getCaseStatus().then((res) => {
        this.caseStatusList = res.result
      })
    },

    getTranCodeList() {
      getTranCodeList().then((res) => {
        if (res.code == 200) {
          this.transcodeList = res.result
        }
      })
    },

    getTypeList() {
      getTypeList().then((res) => {
        this.caseTypeList = res.result
      })
    },

    getProTeamList() {
      getProTeamList().then((res) => {
        this.projectTeams = res.result
      })
    },

    getCaseList() {
      getDevelopCaseList(this.caseform, this.currentpage, this.pageSize, getStore('pro__Login_Username').value).then(
        (res) => {
          this.data = res.result.caseDTO
          this.total = res.result.total
        }
      )
    },

    editOk() {
      //受不了了，後端去驗證合法性
      editCase(this.editCaseForm).then((res) => {
        //console.log(res)
        if (res.code == 200) {
          this.getCaseList()
          this.$message.success('case修改成功')
          this.editCaseModal = false
        } else {
          this.$message.error(res.message)
          this.editCaseForm.trans.transCode = undefined
        }
      })
    },

    pageChange() {
      this.selectedRowKeys = []
      getDevelopCaseList(this.caseform, this.currentpage, this.pageSize, getStore('pro__Login_Username').value).then(
        (res) => {
          this.data = res.result.caseDTO
          this.total = res.result.total
        }
      )
    },

    getPrincipal() {
      getPrincipalList().then((res) => {
        this.principalList = res.result
      })
    },

    devCase(text) {
      getCaseDetail(text.caseId).then((res) => {
        this.devdata = res.result.transMap.map((item) => item)
      })
      this.devModal = true
    },

    devedit(text) {
      this.codeArea = ''
      this.checktrandataSource = text.inputTable
      this.deveditModal = true
    },

    showcaseOk() {
      this.showcaseModal = false
    },

    saveAndTest() {
      var flag = false
      if (this.checktrandataSource != null) {
        var flag = true
      }
      checkInput(this.checktrandataSource).then((res) => {
        this.checktrandataSource = res.result
        for (var i = 0; i < this.checktrandataSource.length; i++) {
          if (this.checktrandataSource[i].isOk != '输入合法') {
            flag = false
          }
        }
        if (flag) {
          this.$message.info('后台测试中，请稍后...',2).then(()=>this.unitModal = false)
          setTimeout(() => {
        this.logs = 'BF86-logs.zip'
      }, 5000);
          
        }
      })
    },

    getCodebyquery() {
      var check = 1
      this.$message
        .loading('查询代码生成中', 2)
        .then(() => getCode(check).then((res) => {
        this.codeArea = this.codeArea+res.result
      }))
    },

    getCode() {
      var check = 0
      this.$message
        .loading('校验代码生成中', 1)
        .then(() => getCode(check).then((res) => {
        this.codeArea = res.result
      }))
    },
    
    saveCode(){
      this.$message
        .loading('代码保存中', 1)
        .then(() => this.$message.success('保存成功!').then(()=>this.codeArea='',this.deveditModal=false))
    },

    unitTest(text) {
      ;(this.checktrandataSource = []), (this.checktrandataSource = text.inputTable)
      this.unitModal = true
    },

    downloadlogs() {
      downloadlogs().then((res) => {
        let blob = new Blob([res], {
          type: 'application/octet-stream', //将会被放入到blob中的数组内容的MIME类型
        })
        let objectUrl = URL.createObjectURL(blob) //生成一个url
        let a = document.createElement('a')
        a.href = objectUrl
        a.download = 'BF86-logs.zip'
        a.click()
        window.URL.revokeObjectURL(objectUrl)
      })
    },

    downloadcode(){
      downloadcode().then((res) => {
        let blob = new Blob([res], {
          type: 'application/octet-stream', //将会被放入到blob中的数组内容的MIME类型
        })
        let objectUrl = URL.createObjectURL(blob) //生成一个url
        let a = document.createElement('a')
        a.href = objectUrl
        a.download = 'code.zip'
        a.click()
        window.URL.revokeObjectURL(objectUrl)
      })
    }
  },
}
</script>

<style scoped>
@import '~@assets/less/common.less';
.upload-demo {
  display: inline-block;
}
.card-container {
  background: #f5f5f5;
  overflow: hidden;
  padding: 24px;
}
.card-container > .ant-tabs-card > .ant-tabs-content {
  height: 120px;
  margin-top: -16px;
}

.card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
  background: #fff;
  padding: 16px;
}

.card-container > .ant-tabs-card > .ant-tabs-bar {
  border-color: #fff;
}

.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
  border-color: transparent;
  background: transparent;
}

.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
  border-color: #fff;
  background: #fff;
}
.editable-add-btn {
  margin-bottom: 8px;
}
.ant-table-row-expand-icon {
  display: none;
}
</style>